<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Indiefilm Productions Studio Management System" />
<meta name="keywords" content="" />

<title>Indiefilm Studio Management System</title>
<link href="../../css/layout.css" rel="stylesheet" type="text/css" media="all" />
<link href="../../css/typography.css" rel="stylesheet" type="text/css" media="all" />
<link href="../../css/form.css" rel="stylesheet" type="text/css" media="all" /> 
<link rel="shortcut icon" href="../../favicon.ico" />
<link href="../../js/css/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css"/>
<script src="../../js/jquery-1.4.3.min.js"></script>
<script src="../../js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="../../js/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="../../js/fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/fancybox/jquery.fancybox-1.3.1.css" media="screen" />   
<script type='text/javascript' src='../../js/popframe.js'></script>
    
   

</head>

<body>
<div id="Outer">
    <div id="Header">
        <div class="header-inner">
            <h1><img src="../../images/blackcurrent-logo.jpg" alt="Logo" /></h1>
            
            <div class="topTabContainer">
            	<div class="topTabSearch">Today is Wed, 4 Aug 10 - Hi Borden Li, <a href="#">Logout</a></div>
            </div>
            
            
            <div class="navContainer">
                <div id="nav-level-one">
                    <h2>Indiefilm Productions</h2>
                </div><!--Navigation Ends-->
        </div><!--navContainer Ends-->
        
        
        </div><!--header-inner Ends-->	
    </div><!--Header-->

        
 <div id="nav_two_level" class="nav_container">
 <div class="nav_container_inner">
	<ul id="nav">
        <li><a href="photo-bookings-list.html" class="current"><span></span><strong>Jobs</strong></a></li>
        <!--<li><a href="photo-album.html"><span></span><strong>Album Orders</strong></a></li> --><li><a href="photo-clients.html"><span></span><strong>Manage</strong></a></li>
        <li><a href="photo-accounts-invoice-open.html"><span></span><strong>Accounts</strong></a></li>
    </ul>
      <ul id="nav_second_level">
        <li><a href="photo-bookings-cal.html"><span></span><strong>Calendar</strong></a></li>
        <li><a href="photo-bookings-list.html"><span></span><strong>Appointment List</strong></a></li>
        <li><a href="photo-bookings-open.html"><span></span><strong>Open Jobs</strong></a></li>
        <li><a href="photo-bookings-closed.html"><span></span><strong>Closed Jobs</strong></a></li>
    </ul>
</div><!--nav_container_inner Ends-->  
</div><!--nav_two_level Ends-->  
        
<div class="clear"></div>        

  <div class="toolbar">
<div class="toolbar-inner">
    <ul class="clients_toolbar">
    <li><a href="photo-bookings-details.html"><span class="icon2 history"></span><span class="text link">Job Details</span></a></li>
    <li><a href="photo-bookings-billing.html" class="current"><span class="icon cryan"></span><span class="text link">Billing</span></a></li>
    <li><a class="print" href="javascript:window.print();"><span class="icon print"></span><span class="text link">Print</span></a></li>	
    </ul>
</div><!--toolbar-inner Ends-->
</div><!--toolbar Ends-->
<div class="clear"></div>

    <div class="main-bg">
            
        <div id="Layout">
            <div class="inner-layout">	
                <div class="typography">
                   
                    
                    <div id="sideBar">
                    <div class="sideModule">
                        <div>
                        <a href="photo-job-form.html"><img src="../../images/new_booking_bt.png" data-hover="images/new_clients_bt_hover.png" data-active="images/new_clients_bt_active.png" class="action-btn" alt="New client"></a>
                        </div>
                    
                        <div>
                            <ul id="shortcuts_menu" class="sidemenu no_icon">
                                <li><a href="photo-bookings-billing-form.html">Edit Charge Details</a></li>
                                <li><a href="photo-accounts-invoice-form.html">Add New Invoice</a></li>
                                <li><a href="#">Add New Payment</a></li>
                            </ul>
                        </div>
                    </div><!--sideModule-->    

      <!--sideModule-->
      
      <div class="sideModule">
      <h4>Client Details</h4>
      <h5>Maya Lyon</h5>
      <p>9 Ernest Rd, Hamilton 3214<br />
        Phone: 07 4897145<br />
        Mobile: 021 443 054<br />
        Email: ctimpany@cs.waikato.ac.nz      </p>
</div> 
      <!--sideModule-->
      	
 
 
                    </div> <!--sidebar-->
                    
                    <div class="contentLayout"><!--contentList Ends--><!--content-->
     <h3>Charge Details</h3>
      <div class="contentBox">
      <table width="100%" border="0" class="formTable">
  <tr class="headerRow">
    <td width="55%">Item name</td>
    <td width="12%">Qty.</td>
    <td width="18%">Unit Price</td>
    <td width="15%" align="right">Total</td>
  </tr>
  <tr class="firstLine">
    <td>Starlight Express Package with Album</td>
    <td>1.0</td>
    <td>1500 <span class="perItem"><p>per item</p></span></td>
    <td align="right">1500</td>
  </tr>
  <tr>
    <td>10x10 Album</td>
    <td>2.0</td>
    <td>80 <span class="perItem">
      <p>per item</p>
    </span></td>
    <td align="right">160</td>
  </tr>
</table>
      <table class="formTable">
          <tr class="firstLine">
            <td colspan="4">
            
            
            </td>
            </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td width="143"><label>Sub Total:</label></td>
            <td width="119">$1,660</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><label>GST:</label><!--hide GST vaule if it is 0.--></td>
            <td>$100</td>
            </tr>
          <tr>
            <td width="183">&nbsp;</td>
            <td width="243">&nbsp;</td>
            <td><label>Paid:</label></td>
            <td>($400)</td>
            </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><label><span class="totalFig">Total Due:</span></label></td>
            <td><span class="totalFig">$1,360</span></td>
          </tr>
          </table>     
     </div>
     
       
     <h3>Invoices</h3>
     
     
       <div class="contentBox">
        <table class="formTable">
          <tr class="firstLine headerRow">
            <td width="134">Invoice Date</td>
            <td width="110">Invoice No.</td>
            <td width="90">Amount</td>
            <td width="137">Due Date</td>
            <td width="150">Status</td>
            <td width="59">Edit</td>
          </tr>
          <tr class="firstLine">
            <td>14 May 2010</td>
            <td><a href="#">000000376</a></td>
            <td>$500</td>
            <td>28 Apr 2010</td>
            <td>Closed</td>
            <td><a href="photo-places-form.html" class="popframe"><img src="../../images/page_edit.png"  alt="Edit" /></a></td>
          </tr>
          <tr>
            <td>15 May 2010</td>
            <td>&nbsp;</td>
            <td>$100</td>
            <td>5 May 2010</td>
            <td>Due in 28 days</td>
            <td><a href="photo-places-form.html" class="popframe"><img src="../../images/page_edit.png"  alt="Edit" /></a></td>
          </tr>
          <tr>
            <td>16 May 2010</td>
            <td><a href="#">000000378</a></td>
            <td>$300</td>
            <td>25 Apr 2010</td>
            <td>Due in <span class="warningNotice">5</span> days</td>
            <td><a href="photo-places-form.html" class="popframe"><img src="../../images/page_edit.png"  alt="Edit" /></a></td>
          </tr>
          <tr>
            <td>17 May 2019</td>
            <td><a href="#">000000379</a></td>
            <td>$10,050</td>
            <td>06 May 2010</td>
            <td><span class="warningNotice">Overdue</span></td>
            <td><a href="photo-places-form.html" class="popframe"><img src="../../images/page_edit.png"  alt="Edit" /></a></td>
          </tr>
          <tr>
            <td colspan="3">&nbsp;</td>
            <td colspan="3"><a href="#">Send Overdue Notice Email</a></td>
            </tr>
          </table>       
     </div><!--content-->
     
     <h3>Payments</h3>
  
  <div class="contentBox">
        <table class="formTable">
          <tr class="firstLine headerRowGreen">
            <td width="122">Payment Date</td>
            <td width="124"> Invoice No.</td>
            <td width="132">Amount Paid</td>
            <td width="122">Method</td>
            <td width="62">Edit</td>
          </tr>
          <tr class="firstLine">
            <td>20 May 2010</td>
            <td><a href="#">000000376</a></td>
            <td><a href="#"><span class="greenText">$50</span></a></td>
            <td>Bank Deposit</td>
            <td><a href="photo-places-form.html" class="popframe"><img src="../../images/page_edit.png"  alt="Edit" /></a></td>
          </tr>
          
          <tr>
            <td>20 May 2010</td>
            <td>&nbsp;</td>
            <td><span class="greenText">$400</span></td>
            <td>Cash</td>
            <td><a href="photo-places-form.html" class="popframe"><img src="../../images/page_edit.png"  alt="Edit" /></a></td>
          </tr>
          </table>       
     </div><!--content-->
                    
                          
                    </div><!--content Layout Ends-->
                                
                </div><!-- typography Ends -->	
            </div><!-- inner-layout Ends -->
        </div><!-- Layout Ends -->
    
    </div><!-- main-bg Ends -->
    

    <div id="Footer">
    
        <div class="footer-tools">
            <ul class="footer-tools-list">
            <li>Website Designed by Indiefilm Productions</li>
            <li class="print"><a href="javascript:print();">Print this page</a></li>
            <!--<li class="email"><a href="#">Email this page</a></li>-->
            <li class="top"><a href="#Header">Page top</a></li>
            <li><a href="#">Logout</a></li>
            </ul>
        </div>
       
         

    </div><!-- Footer Ends -->
    
</div> <!--Outer Ends -->

     



</body>
</html>
